<template>
  <div>
    <!-- 直接在组件中获取数据 不好维护和阅读 -->
    <h2>Count插值拿:{{ $store.state.count }}</h2>
    <h2>num插值拿:{{ $store.state.num }}</h2>

    <h2>Count计算属性拿:{{ count }}</h2>
    <h2>num计算属性拿:{{ num }}</h2>

    <h2>商品的总价格是:插值拿:{{ $store.getters.allPrice }}</h2>
    <h2>商品的总价格是:计算属性拿:{{ allPrice }}</h2>

    <button @click="incrementCount">累加count</button>
    <button @click="incrementNCount({ n: 2 })">累加count</button>
  </div>
</template>

<script>
//vuex提供了一个mapMutations的辅助函数，专门用来方便commit store中的mutations函数
import { mapState, mapMutations } from "vuex";
export default {
  name: "count",
  computed: {
    ...mapState(["count", "num"]),
    allPrice() {
      return this.$store.getters.allPrice;
    },
  },
  methods: {
    ...mapMutations(["incrementCount", "incrementNCount"]),
  },
};
</script>

<style></style>
